<template>
    <div class="store">
        <ul class="category">
            <li v-for="(category,index) in categorys" :key="index"
                class="category-item"
                :class="{'active':category.type===currentType}"
                @click="changeType(category.type)"
            >{{category.name}}
            </li>
        </ul>
        <div class="drug-list-wrapper">
            <drug-list :drugs="currentDrugs" @addCount="addCount"></drug-list>
            <div class="pagination-wrapper">
                <el-pagination
                        background
                        :current-page.sync="currentPage"
                        @current-change="changePage"
                        :page-size="6"
                        :total="60">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import DrugList from "@/components/client/DrugList/DrugList";
    import Vue from "vue";

    export default {
        data() {
            return {
                categorys: [],
                currentType: "0",
                currentPage: 1
            }
        },
        props: {
            drugs: {
                type: Object
            },
            hotDrugs: {
                type: Array
            }
        },
        computed: {
            currentDrugs() {
                if (this.drugs[this.currentType] === undefined) {
                    return;
                }
                return this.drugs[this.currentType][this.currentPage];
            }
        },
        created() {
            this.$http.get("/api/categorys").then((response) => {
                this.categorys = response.data.data;
                this.categorys.forEach((category) => {
                    Vue.set(this.drugs, category.type, {});
                });
                this.getDrugs();
            });
        },
        components: {
            DrugList
        },
        methods: {
            changeType(type) {
                this.currentType = type;
                this.currentPage = 1;
                this.getDrugs();
            },
            changePage() {
                this.getDrugs();
            },
            getDrugs() {
                if (this.drugs[this.currentType][this.currentPage] === undefined) {
                    this.$http.get("/api/drugs", {
                        params: {
                            "currentType": this.currentType,
                            "currentPage": this.currentPage
                        }
                    }).then((response) => {
                        Vue.set(this.drugs[this.currentType], this.currentPage, response.data.data)
                    })
                }
            },
            addCount(x, y) {
                this.$emit('addCount', x, y);
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .category {
        display flex
        justify-content center
        width 800px
        height 50px
        margin 0 auto 20px

        .category-item {
            width 120px
            height 48px
            line-height 50px
            margin 0 5px
            border-radius 5px
            text-align center
            font-size 14px
            cursor pointer
            border 1px solid rgba(7, 17, 27, 0.2)

            &.active {
                background rgba(7, 17, 27, 0.1)
            }

            &:hover {
                background rgba(7, 17, 27, 0.1)
            }
        }
    }

    .drug-list-wrapper {
        width 1000px
        height 800px
        margin auto
        border-radius 20px
        box-shadow 0 0 50px darkgrey
        margin-top 20px

        .pagination-wrapper {
            display flex
            justify-content center
        }
    }
</style>
